<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
	<title>异步</title>
	<style type="text/css">
	* {
		padding: 0;
		margin: 0;
	}
    </style>
</head>
<body>
	<div class="container">
		<h1>异步</h1>
	</div>
	<script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
	<script type="text/javascript">

	function sendAJAX(url){
		return new Promise((resolve, reject) => {
			const xhr = new XMLHttpRequest();
			xhr.responseType = 'json';
			xhr.open("GET", url);
			xhr.send();
            //处理结果
            xhr.onreadystatechange = function(){
            	if(xhr.readyState === 4){
                    //判断成功
                    if(xhr.status >= 200 && xhr.status < 300){
                        //成功的结果
                        resolve(xhr.response, xhr.status, xhr);
                    }else{
                    	reject(xhr.status, xhr);
                    }
                }
            }
        });
	}
	function f1(seconds = 2) {
		console.log(`----------- f1 ${seconds}------------\n`)
		
		return  sendAJAX('http://localhost/ajax/ajax3.php?type=f1&t='+seconds); 
	}
	function f2(seconds = 1) {
		console.log(`----------- f2 ${seconds}------------\n`)
		return  sendAJAX('http://localhost/ajax/ajax3.php?type=f2&t='+seconds); 
	}

	console.log('--------开始----\n')


	// f1 先执行 但是f2 先执行完 输出
	// 
	console.time('f1')
	f1().then(function(data) {
		console.log(data)
		console.timeEnd('f1')
	})
	console.log(' 执行中 ...........')

	console.time('f2')
	f2().then(function(data) {
		console.log(data)
		console.timeEnd('f2')
	})

	console.log('--------结束----\n')
	</script>
</body>
</html>